<script setup lang="ts">
import { useAuth } from '../store/auth';
const authStore = useAuth();
const router = useRouter();

// 跳转页面
const changePage = () => {
    if(authStore.auth.isRegisterPageFlag) {
        authStore.setIsRegisterPageFlag(false);
        router.replace('/user/login')
    }else{
        authStore.setIsRegisterPageFlag(true);
        router.replace('/user/register');
    }
}
</script>
<template>
    <div class="box-container">
        <div class="box-item box-left">
            <span v-if="authStore.auth.isRegisterPageFlag">
                <div class="left-tip-box">
                    <div class="tip-title">
                        已有账户？
                    </div>
                    <div class="tip-content">
                        如果你已有系统账号，可以点击下面的按钮进行登录。
                    </div>
                    <div class="tip-button">
                        <t-button shape="round" variant="outline" :ghost="true" @click="changePage">立即登录</t-button>
                    </div>
                </div>
            </span>
            <span v-else>
                <div class="left-tip-box">
                    <div class="tip-title">
                        没有账户？
                    </div>
                    <div class="tip-content">
                        如果你还没有系统的账号，可以点击下面的按钮进行注册，注册后你将可以体验系统完整功能。
                    </div>
                    <div class="tip-button">
                        <t-button shape="round" variant="outline" :ghost="true" @click="changePage">立即注册</t-button>
                    </div>
                </div>
            </span>
        </div>
        <div class="box-item box-right">
            <div class="right-form-box">
                <span v-if="authStore.auth.isRegisterPageFlag">
                    <div class="form-title">注册</div>
                </span>
                <span v-else>
                    <div class="form-title">登录</div>
                </span>
                <div class="form-content">
                    <slot />
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.box-container {
    display: flex;
    justify-content: space-between;
    width: 100vw;
    background-color: #fff;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.box-item {
    flex: 1;
    position: relative;
}

.box-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(-45deg, #0052d9 0, #4481eb 100%);
    transition: 1.8s, ease-in-out;
    position: relative;

    /* border-bottom-right-radius: 100%; */
    .left-tip-box {
        width: 300px;
        margin: 0 auto;
        text-align: center;
        line-height: 32px;
        color: #fff;

        .tip-title {
            font-size: 32px;
            font-weight: 500;
        }

        .tip-content {
            margin-top: 16px;
        }

        .tip-button {
            margin-top: 16px;
        }
    }
}

.box-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .right-form-box {
        margin: 0 auto;
        width: 400px;

        .form-title {
            font-size: 32px;
            font-weight: 500;
        }

        .form-content {
            margin-top: 16px;
        }
    }
}
</style>